<template>
    <L7Map map-id="my-map" @loaded="handleLoaded" :options="options"></L7Map>
</template>

<script setup lang="ts">
import { Scene, CityBuildingLayer } from '@antv/l7'

const options: any = ref({
    zoom: 14.3,
    pitch: 80,
    center: [114.050008, 22.529272],
    projection: 'globe'
})
const handleLoaded = async (scene: Scene) => {
    // 3d build  
    const data = await fetch('/mapjson/3dbuild.json').then(res => res.json())
    const layer = new CityBuildingLayer({
        name: '3dbuild'
    })
    layer.source(data).shape('extrude')
        .size('h20', [100, 120, 160, 200, 260, 500])
        .color('h20', [
            '#816CAD',
            '#A67FB5',
            '#C997C7',
            '#DEB8D4',
            '#F5D4E6',
            '#FAE4F1',
            '#FFF3FC',
        ]).style({
            opacity: 0.7,
            baseColor: 'rgb(16, 16, 16)',
            windowColor: 'rgb(30, 60, 89)',
            brightColor: 'rgb(255, 176, 38)',
            sweep: {
                enable: true,
                sweepRadius: 3,
                sweepColor: '#1990FF',
                sweepSpeed: 0.5,
                sweepCenter: [114.050008, 22.529272],
            },
        }).animate({
            enable: true,
        });

    scene.addLayer(layer);
    // scene.setPitch(90)
}
</script>
